{% extends "../base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="application-engine-runtime">
    <bk-table
        :data="runtimes"
        style="margin-top: 15px;">
        <bk-table-column label="模块" prop="module.name"></bk-table-column>
        <bk-table-column label="基础镜像" prop="builder">
            <template slot-scope="props">
                <span v-if="props.row.builder">$[ props.row.builder.display_name || props.row.builder.name || props.row.builder.image]</span>
                <span v-else>未设置</span>
            </template>
        </bk-table-column>
        <bk-table-column label="构建工具" prop="builder.buildpacks">
            <template slot-scope="props">
                <span>$[ props.row.buildpacks.map(item => item.display_name || item.name).join(",") ]</span>
            </template>
        </bk-table-column>
        <bk-table-column label="操作" width="150">
            <template slot-scope="props">
                <bk-button theme="primary" text @click="showBindBuildPackDialog(props.row)">修改运行时配置</bk-button>
            </template>
        </bk-table-column>
    </bk-table>

<bk-dialog v-model="dialog.visible" width="900"
    theme="primary"
    :mask-close="false"
    header-position="left"
    :confirm-fn="submitDialog"
    :title="dialog.title">
    <bk-form :label-width="95">
        <bk-form-item label="基础镜像: ">
            <bk-select
                v-model="selectedBuilderName"
                searchable
                :clearable="false"
                @selected="handleSelectedBuilderChange">
                <bk-option v-for="(option, index) in stacks"
                    :key="option.builder.id"
                    :id="option.builder.name"
                    :name="`${option.builder.display_name || option.builder.name} (${option.builder.description || '--'})`">
                    <div>
                        $[ option.builder.display_name || option.builder.name || option.builder.image] ($[ option.builder.description || '--'])
                    </div>
                </bk-option>
            </bk-select>
        </bk-form-item>
        <bk-form-item label="构建工具: ">
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <div style="border: 1px solid #dcdee5; width: 335px;">
                    <div class="draggable-box-header"> 可选的构建工具 (共$[ unselectedBuildPack.length ]条)</div>
                    <div style="height: 320px; overflow: scroll;" class="beauty-scrollbar">
                      <draggable :list="unselectedBuildPack" group="buildpack" style="min-height: 320px;">
                        <div
                          class="draggable-content" style="line-height: 40px; "
                          :class="dialog.row.buildpack_ids.indexOf(element.id) === -1?'':'draggable-content-remove'"
                          v-for="(element, index) in unselectedBuildPack"
                          :key="element.id"
                        >
                            <span v-bk-tooltips="getBuildPackVisibleName(element)">
                                $[ getBuildPackVisibleName(element) ]
                            </span>
                        </div>
                       <template slot="footer" key="footer">
                           <div v-if="unselectedBuildPack.length === 0" style="min-height: 0px;"></div>
                       </template>
                      </draggable>
                    </div>
                </div>
                <div  style="width: 30px;height: 30px;background: url() no-repeat 50%;"></div>
                <div style="border: 1px solid #dcdee5; width: 335px;">
                    <div class="draggable-box-header"> 选中的构建工具 (共$[ selectedBuildPack.length ]条)</div>
                    <div style="height: 320px; overflow: scroll;" class="beauty-scrollbar">
                      <draggable :list="selectedBuildPack" group="buildpack" style="min-height: 320px;">
                        <div
                          class="draggable-content" style="line-height: 40px; "
                          :class="dialog.row.buildpack_ids.indexOf(element.id) !== -1?'':'draggable-content-new'"
                          v-for="(element, index) in selectedBuildPack"
                          :key="element.id"
                        >
                            <span v-bk-tooltips="getBuildPackVisibleName(element)">
                                $[ getBuildPackVisibleName(element) ]
                            </span>
                        </div>
                       <template slot="footer" key="footer">
                           <div v-if="selectedBuildPack.length === 0" style="min-height: 0px;"></div>
                       </template>
                      </draggable>
                    </div>
                </div>
            </div>
            <p class="ps-tip mt10">构建工具会逐个进行构建，请注意构建工具的选择顺序</p>
        </bk-form-item>
    </bk-form>
</bk-dialog>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const runtimes = {{ runtimes | to_json }}

    const stacks = {{ stacks | to_json }}

    const URLRouter = {
        list: decodeURI("{% url 'admin.applications.engine.runtime.list' application.code %}"),
        bind: decodeURI("{% url 'admin.applications.engine.runtime.bind' application.code '${module_name}' %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#application-engine-runtime",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    application,
                    runtimes,
                    stacks,
                    dialog: {
                        visible: false,
                        title: '修改运行时配置',
                        row: undefined,
                    },
                    selectedBuilderName: '',
                    unselectedBuildPack: [],
                    selectedBuildPack: []
                }
            },
            mounted: function () {
                console.log("mounted", this)
            },
            methods: {
                showBindBuildPackDialog: function (row) {
                    if (row.builder) {
                        this.updateDraggable(row)
                        this.selectedBuilderName = this.stacks.filter(item => item.builder.id === row.builder.id)[0].builder.name
                    } else {
                        this.selectedBuilderName = stacks[0].builder.name
                        this.updateDraggable({
                            buildpack_ids: [],
                            builder: stacks[0].builder
                        })
                    }

                    this.dialog.row = row
                    this.dialog.visible = true
                },
                updateDraggable: function (runtime) {
                    let buildpacks = this.stacks.filter(item => item.builder.id === runtime.builder.id)[0].buildpacks
                    this.unselectedBuildPack = buildpacks.filter(item => runtime.buildpack_ids.indexOf(item.id) === -1)
                    this.selectedBuildPack = buildpacks.filter(item => runtime.buildpack_ids.indexOf(item.id) !== -1)
                },
                handleSelectedBuilderChange: function () {
                    if (this.selectedBuilderName === this.dialog.row.builder.name) {
                        this.updateDraggable(this.dialog.row)
                    } else {
                        this.updateDraggable({
                            buildpack_ids: [],
                            builder: this.stacks.filter(item => item.builder.name === this.selectedBuilderName)[0].builder
                        })
                    }
                },
                submitDialog: async function () {
                    let url = URLRouter.bind.replace("${module_name}", this.dialog.row.module.name)
                    try {
                        await this.$http.post(url, {
                            image: this.selectedBuilderName,
                            buildpacks_id: this.selectedBuildPack.map(item => item.id)
                        })
                    } finally {
                        this.runtimes = (await this.$http.get(URLRouter.list))
                    }
                    this.dialog.visible = false
                },
                getBuildPackVisibleName (element) {
                    if (element === undefined) {
                        return '--'
                    } else {
                        if (element.display_name)
                            return `${element.display_name}(${element.name})`
                        return element.name || element.id
                    }
                }
            }
        })
    })
</script>
<style>

.draggable-box-header {
    background-color: #fafbfd;
    height: 38px;
    line-height: 38px;
    font-size: 12px;
    line-height: 40px; padding: 0 20px; border-bottom: 1px solid #dcdee5;
}

.draggable-content {
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    padding: 0px 20px;
    cursor: pointer;
}

.draggable-content:hover {
    background-color: #eef6fe;
    color: #3a84ff;
}

.draggable-content-new {
    background-color: #94f5a4;
    color: #3a84ff;
}

.draggable-content-new:hover {
    background-color: #45e35f;
    color: #3a84ff;
}

.draggable-content-remove {
    background-color: #fd9c9c;
    color: #3a84ff;
}

.draggable-content-remove:hover {
    background-color: #ff5656;
    color: #3a84ff;
}

.beauty-scrollbar::-webkit-scrollbar {
    width: 4px;
    background-color: hsla(0,0%,80%,0);
}

.beauty-scrollbar::-webkit-scrollbar-thumb {
    height: 5px;
    border-radius: 2px;
    background-color: #e6e9ea;
}
</style>
{% endblock %}
